<template>
	<div class="overflow-hidden">
		<n-card :bordered="false" class="h-full rounded-8px shadow-sm">
			<div class="flex-col h-full">
				<n-space class="pb-12px" justify="space-between">
					<n-space>
						<n-button type="primary">
							<icon-ic-round-plus class="mr-4px text-10px"/>
							新增
						</n-button>
					</n-space>

				</n-space>

				<el-table
					:data="data"
					border
					v-loading="loading"
					center
					empty-text="暂无数据"
					style="width: 100%"
				>
					<el-table-column prop="tenantId" label="租户编号" align="center"/>
					<el-table-column prop="contactUserName" label="联系人" align="center"/>
					<el-table-column prop="contactPhone" label="联系电话" align="center"/>
					<el-table-column prop="companyName" label="企业名称" align="center"/>
					<el-table-column prop="expireTime" label="过期时间" align="center"/>
					<el-table-column prop="status" label="状态" align="center">
							<template #default="{row}">
								 <el-tag v-if="row.status==='0'">启用</el-tag>
								 <el-tag v-else>禁用</el-tag>
							</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" align="center"/>
					<el-table-column label="操作" align="center">
						<template #default="scope">

						</template>
					</el-table-column>
				</el-table>



				<n-space justify="end" class="mt-5px">
					<n-pagination
						v-model:page="tenantSearchParams.page"
						v-model:page-size="tenantSearchParams.size"
						:item-count="itemCount"
						show-size-picker
						:page-sizes="[10, 20, 30, 40]"
						:on-update:page="onChange"
						:on-update:page-size="onUpdatePageSize"
					/>
				</n-space>
			</div>
		</n-card>

	</div>
</template>

<script setup>
import {reactive, toRefs, ref, onMounted} from "vue";
import {fetchTenantList} from '@/service';
import {useMessage} from 'naive-ui'
const msg = useMessage()


const state = reactive({
	loading: false,
	tenantSearchParams: {
		page: 1,
		size: 10,
	},
	itemCount: 0,
	data: [],
	checkedRowKeysRef: [],
	roleId: ''
})
const {
	loading,
	data,
	tenantSearchParams,
	itemCount,
	title
} = toRefs(state)

const onChange = (page) => {
	state.tenantSearchParams.page = page;
}

const onUpdatePageSize = (pageSize) => {
	state.tenantSearchParams.size = pageSize;
}
onMounted(()=>{
	tenantTableData()
})

const tenantTableData = async () => {
	state.loading = true
	setTimeout(async () => {
		const {data} = await fetchTenantList({...state.tenantSearchParams})
		state.data = data.records;
		state.itemCount = data.total;
		state.loading = false
	}, 400)

}








</script>

<style scoped>

</style>
